<template>
  <div class="echarts-container" ref="echartsContainer" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      nameList: [
        '学生1',
        '学生2',
        '学生3',
        '学生4',
        '学生5',
        '学生6',
        '学生7',
        '学生8',
        '学生9',
        '学生10'
      ],
      //总共几次作业
      valueList: [12, 12, 12, 12, 12, 12, 12, 12, 12, 12],
      //完成了几次
      finishList:[10,9,7,3,6,8,12,3,11],
      showNum: 5,
      sum: 0,
      option: {},
      currentIndex: 0,
      myChart: null
    };
  },
  mounted() {
    this.initChart();
    this.updateChartData();
    setInterval(this.updateChartData, 2400);
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(this.$refs.echartsContainer);
      this.sum = this.valueList.reduce((per, cur) => per + cur, 0);
      console.log(this.sum) //120
      this.option = {
        backgroundColor: "#1e1e1e",
        dataZoom: [
          {
            id: 'dataZoom',
            show: true,
            type: 'slider',
            backgroundColor: 'transparent',
            brushSelect: false,
            filterMode: 'none',
            width: 7,
            yAxisIndex: [0, 1, 2],
            startValue: 0,
            endValue: this.showNum - 1,
            handleStyle: {
              color: 'rgba(0,178,255,0.8)',
              borderColor: 'rgba(0,178,255,0.8)'
            },
            fillerColor: 'rgba(0,178,255,0.8)',
            borderColor: 'transparent',
            showDetail: false,
            dataBackground: {
              areaStyle: {
                opacity: 0
              },
              lineStyle: {
                color: 'transparent'
              }
            }
          },
          {
            type: 'inside',
            yAxisIndex: [0, 1, 2],
            zoomOnMouseWheel: false,
            moveOnMouseMove: true,
            moveOnMouseWheel: true
          }
        ],
        grid: {
          left: '64',
          right: '24',
          bottom: '24',
          top: '24'
        },
        tooltip: {
          show: false
        },
        xAxis: {
          show: false,
          type: 'value',
          boundaryGap: ['0%', '5%']
        },
        yAxis: [
          {
            id: 'yAxis1',
            type: 'category',
            inverse: true,
            axisLabel: {
              inside: true,
              align: 'left',
              verticalAlign: 'bottom',
              padding: [0, 0, 15, -7],
              textStyle: {
                color: '#FFFFFF',
                fontSize: '14',
                fontFamily: 'Source Han Sans CN-Regular',
                fontWeight: 400
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: this.nameList
          },
          {
            id: 'yAxis2',
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            //这里展示总共有几次作业，完成了几次
            axisLabel: {
              padding: [0, 10, 15, 0],
              verticalAlign: 'bottom',
              align: 'right',
              formatter: (value, index) => {
                return `{unit|一共}{value|${value}}{unit|次作业}\n{unit|已完成}{finishList|${this.finishList[index]}}{unit|次}`;
              },
              rich: {
                value: {
                  color: 'rgba(0, 0, 0, 0.85)',
                  fontFamily: 'HarmonyOS Sans-Regular',
                  fontSize: '16'
                },
                finishList: {
                  color: 'rgba(0, 0, 0, 0.85)',
                  fontFamily: 'HarmonyOS Sans-Regular',
                  fontSize: '16'
                },
                unit: {
                  color: 'rgba(0, 0, 0, 0.85)',
                  fontFamily: 'Source Han Sans CN-Regular',
                  fontSize: '14'
                }
              }
            },
            data: this.valueList
          },
          {
            id: 'yAxis3',
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            type: 'category',
            axisTick: {
              show: false
            },
            inverse: true,
            data: this.nameList,
            position: 'left',
            axisLabel: {
              color: 'rgba(0, 0, 0, 0.65)',
              padding: [0, 0, -3, -32],
              align: 'left',
              verticalAlign: 'bottom',
              formatter: (value, index) => {
                let i = this.nameList.indexOf(value);
                if (i == 0) {
                  return `{lg1|${i + 1}}`;
                } else if (i == 1) {
                  return `{lg2|${i + 1}}`;
                } else if (i == 2) {
                  return `{lg3|${i + 1}}`;
                } else {
                  return `{lg|${i + 1}}`;
                }
              },
              rich: {
                lg1: {
                  backgroundColor: 'rgba(250, 84, 28, 0.20)',
                  color: 'rgba(255, 122, 69, 1)',
                  borderRadius: 6,
                  align: 'center',
                  width: 28,
                  height: 28,
                  lineHeight: 28,
                  verticalAlign: 'middle',
                  fontSize: 14,
                  fontFamily: 'HarmonyOS Sans-Regular'
                },
                lg2: {
                  backgroundColor: 'rgba(250, 173, 20, 0.20)',
                  color: 'rgba(250, 173, 20, 1)',
                  borderRadius: 6,
                  align: 'center',
                  width: 28,
                  height: 28,
                  lineHeight: 28,
                  verticalAlign: 'middle',
                  fontSize: 14,
                  fontFamily: 'HarmonyOS Sans-Regular'
                },
                lg3: {
                  backgroundColor: 'rgba(35, 214, 136, 0.20)',
                  color: 'rgba(35, 214, 136, 1)',
                  borderRadius: 6,
                  align: 'center',
                  width: 28,
                  height: 28,
                  lineHeight: 28,
                  verticalAlign: 'middle',
                  fontSize: 14,
                  fontFamily: 'HarmonyOS Sans-Regular'
                },
                lg: {
                  backgroundColor: 'rgba(57, 126, 240, 0.20)',
                  color: '#397EF0',
                  borderRadius: 6,
                  align: 'center',
                  width: 28,
                  height: 28,
                  lineHeight: 28,
                  verticalAlign: 'middle',
                  fontSize: 14,
                  fontFamily: 'HarmonyOS Sans-Regular'
                }
              }
            }

      }
    ],
        /**
         *

         第一个系列（bar1）：
         name: 系列的名称为“值”。
         type: 类型为“bar”，表示这是一个条形图系列。
         id: 系列的唯一标识符。
         barCategoryGap: 设置各个类目之间的距离，以百分比表示。
         showBackground: 是否显示背景。
         barGap: 不同系列之间的间距。
         backgroundStyle: 背景样式，设置条形图背景的颜色。
         itemStyle: 条形图样式，这里使用了线性渐变颜色。
         barWidth: 条形图的宽度。
         data: 使用 this.valueList 中的数据作为条形图的数据。

         第二个系列（bar2）：
         这个系列没有具体的数据，只是为了形成堆叠效果，因此颜色设置为透明。
         stack: 设置为 'max'，表示堆叠在 'max' 这个堆叠组上。

         第三个系列（bar3）：
         这个系列也没有具体的数据，仅用来控制渐变。
         stack: 同样设置为 'max'，表示堆叠在 'max' 这个堆叠组上。
         data: 这里使用了 this.sum / 1000，这个值会被应用于所有的数据点，用来控制颜色的渐变。


         综上所述，这段代码定义了三个条形图系列，其中第一个系列包含了实际的数据，第二个和第三个系列用于视觉上的效果，如堆叠和渐变。
         */
      series: [
        {
          name: '值',
          type: 'bar',
          id: 'bar1',
          barCategoryGap: '50%',
          showBackground: true,
          barGap: '-140%',
          backgroundStyle: {
            color: 'rgba(26, 71, 172, 0.3)'
          },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(39, 92, 226, 0.6)'
                },
                {
                  offset: 1,
                  color: 'rgba(40, 252, 255, 1)'
                }
              ],
              global: false
            }
          },
          barWidth: 5,
          data: this.valueList
        },
        {
          name: 'max',
          type: 'bar',
          id: 'bar2',
          data: this.valueList,
          barWidth: 9,
          stack: 'max',
          itemStyle: {
            color: 'transparent'
          }
        },
        {
          name: 'max',
          type: 'bar',
          id: 'bar3',
          //控制渐变
          data: this.valueList.map((item) => this.sum / 1000),
          barWidth: 9,
          stack: 'max',
          itemStyle: {
            color: '#80D0FB'
          }
        }
      ]
    };

    this.myChart.setOption(this.option);
  },

    updateChartData() {
      if (this.currentIndex + this.showNum < this.nameList.length) {
        this.currentIndex = this.currentIndex + 1;
      } else {
        this.currentIndex = 0;
      }

      const startValue = this.currentIndex;
      let endValue = this.currentIndex + this.showNum - 1;

      // 处理边界情况
      if (endValue >= this.nameList.length) {
        endValue = this.nameList.length - 1;
      }

      this.myChart.setOption({
        dataZoom: [
          {
            id: 'dataZoom',
            startValue: startValue,
            endValue: endValue
          }
        ]
      });
    }

  }
};
</script>

<style>
.echarts-container {
  position: relative;
}

</style>
